import { Flex, Layout } from 'antd'
import GroupList from '@/pages/Chat/components/Group'
import Conversation from './components/Conversation'
import ChatInput from './components/Input'
import "./index.less"
import { useEffect } from 'react'
import useChat from '@/store/chat'
export interface ChatProps {
  clickSend?: (content: string) => void
}
function Chat(props: ChatProps) {
  const { clearMessages } = useChat()
  useEffect(() => {
    return () => {
      clearMessages()
    }
  }, [])
  return (<Flex>
    <Layout className='chat-layout-style'>
      <Layout.Sider width="25%" className='chat-sider-style' theme='light'>
        <GroupList />
      </Layout.Sider>
      <Layout>
        <Layout.Header className="chat-header-style"></Layout.Header>
        <Layout.Content className='chat-content-style'>
          <Conversation />
        </Layout.Content>
        <Layout.Footer className='chat-footer-style'>
          <ChatInput clickSend={props.clickSend} />
        </Layout.Footer>
      </Layout>
    </Layout>
  </Flex>
  )
}
export default Chat
